<template>
	<view class="content"> 
		<block v-if="list.length!=0">
			<view class="coupon_list">
				<view class="coupon_item fx-row-sa-c" v-for="(item,index) in list" :key="item.id">
					<view class="coupon_le fx-col-c">
						<view class="ft28">￥<span style="font-size: 50rpx;">{{item.rmb}}</span></view>
						<!-- <view>{{item.typeName}}</view> -->
						<view>满{{item.overflow}}可用</view>
					</view>
					<view class="coupon_ri fx-row-sb-c">
						<view class="coupon_text">
							<view class="coupon_tit ft30">{{item.name}}</view>
							<view class="ft24">{{item.beginDate}} - {{item.endDate}}</view>
						</view>
						<view class="coupon_use" @click="gouse">去使用</view>
						<!-- <view class="coupon_neck">立即领取</view> -->
					</view>
				</view> 
				  <uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText=' '/>
			</view>
		</block>
		<!-- 缺省状态 -->
		<view v-else class="emptys">
		 <image src="@/static/picture/empty.png" mode="widthFix" lazy-load></image>
		 <view>暂无优惠券</view>
		</view> 
	</view>
</template>

<script>
	import { couponList } from '@/utils/api.js' 
	import badgeMix from '@/common/mixins.js' 
	export default { 
		mixins: [badgeMix],
		data() {
			return { 
				list:[], 
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数  
			}
		},
		onLoad() {
			this.list = []
			this.pageNum = 1
			this.getCoupons()
		},
		methods: { 
			getCoupons(){
				uni.showLoading({
					title:'加载中'
				})
				couponList().then((res) => {  
					uni.hideLoading()
					if(res.code == '200'){ 
						res.result.forEach((item,index)=>{
							item.rmb = this.conversion(item.rmb).split(".")[0]
							item.overflow = this.conversion(item.overflow).split(".")[0] 
							item.beginDate = item.beginDate.replace(/-/g,'.')
							item.endDate = item.endDate.replace(/-/g,'.')
						}) 
						this.list = res.result
					}
				})  
			},
			gouse(){
				uni.switchTab({
					url:'/pages/index/index'
				}) 
			},
		}, 
　　onReachBottom() {   
			if(this.isLoading=='nomore'){
				return;
			}
			this.pageNum++
			//调用请求接口
			this.getCoupons()
		},
	}
</script>

<style  lang="scss">
	page{
		background-color:$uni-main-page ;
	}
	.coupon_list{
		width: 714rpx;
		height: 152rpx;
		margin: 0 18rpx;
		padding: 20rpx 0;
		.coupon_item{
			position: relative;
			margin-bottom: 20rpx;
			background-color: #FFF4F1;
			border-radius: 25rpx;
			box-shadow: 0 6rpx 10rpx rgba(159, 159, 159, 0.1);
			overflow: hidden;
			.coupon_le{
				width: 180rpx;
				height: 152rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				background: linear-gradient(109deg, #FBB560 0%, #FF6864 100%);
				image{
					width: 184rpx;
				}
				&::after{
					content: '';
					position: absolute;
					left: -12rpx;
					width:24rpx;
					height: 24rpx;
					background-color: #fff;
					border-radius: 50%;
				}
			}
			
			.coupon_ri{
				width: 494rpx;
				padding: 0 20rpx;
				color: #FE0000;
				.coupon_text{
					width: 330rpx;
					margin-right: 14rpx;
					.coupon_tit{
						padding-bottom: 18rpx;
						margin-bottom: 18rpx;
						border-bottom: 1rpx dashed #FFC9BB; 
					}
				}
				.coupon_use{
					width: 134rpx;
					height: 54rpx; 
					border: 3rpx solid rgba(254, 5, 6, 1); 
					font-size: 24rpx;
					border-radius: 35rpx;
					text-align: center;
					line-height: 54rpx;
				}
				.coupon_neck{
					padding: 10rpx 24rpx;
					background: linear-gradient(109deg, #FC5C6D 0%, #FD0608 100%);
					font-size: 24rpx;
					color: #fff;
					border-radius: 40rpx;
				}
			}
		}
	}
</style>
